<template>
    <div class="BottomNav">
        <div class="BottomNav-top">
            <div class="container">
                <ul>
                    <li>
                        <div class="img">
                            <img src="../assets/img/index/svg/ia_10012.svg" alt="">
                        </div>
                        <p>全场满 ¥99 包邮</p>
                    </li>
                    <li>
                        <div class="img">
                            <img src="../assets/img/index/svg/ia_10013.svg" alt="">
                        </div>
                        <p>支持支付宝、微信、银联、银行转账支持花呗、京东白条和招行分期</p>
                    </li>
                    <li>
                        <div class="img">
                            <img src="../assets/img/index/svg/ia_10014.svg" alt="">
                        </div>
                        <p>联系我们： 在线支持</p>
                    </li>
                    <li>
                        <div class="img">
                            <img src="../assets/img/index/svg/ia_10015.gif" alt="">
                        </div>
                        <p> </p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="BottomNav-detail">
            <div class="container">
                <div class="detail-top">
                    <dl>
                        <dt>热门产品分类</dt>
                        <dd><a href="">御 Mavic</a></dd>
                        <dd><a href="">灵眸 Osmo</a></dd>
                        <dd><a href="">DJI FPV</a></dd>
                        <dd><a href="">精灵 Phantom</a></dd>
                        <dd><a href="">如影 Ronin</a></dd>
                        <dd><a href="">机甲大师 RoboMaster</a></dd>
                        <dd><a href="">增值服务</a></dd>
                    </dl>
                    <dl>
                        <dt>帮助与支持</dt>
                        <dd><a href="">支付方式</a></dd>
                        <dd><a href="">订单帮助</a></dd>
                        <dd><a href="">发货和物流</a></dd>
                        <dd><a href="">退换货条款</a></dd>
                        <dd><a href="">技术支持</a></dd>
                        <dd><a href="">维修中心</a></dd>
                        <dd><a href="">售后服务政策</a></dd>
                    </dl>
                    <dl>
                        <dt>商城项目</dt>
                        <dd><a href="">DJI 币返利计划</a></dd>
                        <dd><a href="">以旧换新</a></dd>
                        <dd><a href="">DJI 大疆商城 APP</a></dd>
                    </dl>
                    <dl>
                        <dt>探索精彩大疆</dt>
                        <dd><a href="">天空之城</a></dd>
                        <dd><a href="">DJI 大疆社区</a></dd>
                        <dd><a href="">购机指南</a></dd>
                        <dd><a href="">安全飞行指引</a></dd>
                        <dd><a href="">环球飞行指南</a></dd>
                    </dl>
                    <dl>
                        <dt>热门产品分类</dt>
                        <dd><a href="">第一时间了解我们的促销活动、热销产品和最新信息。</a></dd>
                        <dd><a href="">御 Mavic</a></dd>
                    </dl>
                </div>
                <div class="detail-bottom">
                    <div class="detail-bottom-left">
                        <div class="img">
                            <a href="">
                                <img src="../assets/img/index/img/logo.png" alt="">
                            </a>   
                        </div>
                        <div class="more">
                            <a href="">关于我们</a>
                            <a href="">联系我们</a>
                            <a href="">招聘精英</a>
                            <a href="">官方旗舰店</a>
                        </div>
                    </div>
                    <div class="detail-bottom-right">
                        <div class="cooperate">
                            <a href=""><img src="../assets/img/index/svg/youku.svg" alt=""></a>
                            <a href=""><img src="../assets/img/index/svg/weibo.svg" alt=""></a>
                            <a href=""><img src="../assets/img/index/svg/weixin.svg" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="BottomNav-bottom">
            <div class="container">
                <div class="BottomNav-bottom-left">
                    <div class="copyright">
                        <span>Copyright © 2021 DJI 大疆创新 版权所有</span>
                    </div>
                    <div class="more">
                        <a href="">隐私权政策</a><span></span>
                        <a href="">使用条款</a><span></span>
                        <a href="">粤ICP备12022215号-11</a><span></span>
                        <a href="">营业执照</a><span></span>
                        <a href="">网站地图</a>
                    </div>
                </div>
                <div class="BottomNav-bottom-right">
                    <div class="feedback">
                        <a href="">网站问题反馈？点击这里</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    .BottomNav {
        color: #6c7073;
        border-top: 2px solid #f0f1f2;
        .BottomNav-top {
            background-color: white;
            ul {
                margin-bottom: 0;
                display: flex;
                justify-content: space-between;
                li {
                    width: 292px;
                    text-align: center;
                    padding: 48px 0;
                    .img {
                        margin-bottom: 10px;
                    }
                    p {
                        padding: 0 32px;
                        color: #6c7073;
                    }
                }
            }
        }
        .BottomNav-detail{
            background-color: white;
            padding: 72px 0 0 0;
            margin-top: 2px;
            font-size: 12px;
            text-align: left;
            line-height: 24px;
            .detail-top {
                display: flex;
                justify-content: space-between;
                padding-bottom: 28px;
                dl {
                    width: 225px;
                    dt,
                    dd {
                        margin-bottom: 8px;
                        a {
                            color: #6c7073;
                        }
                    }
                }
            }
            .detail-bottom {
                font-size: 12px;
                border-bottom: 2px solid #f0f1f2;
                display: flex;
                justify-content: space-between;
                // margin: 0 0 16px;
                padding: 0 0 16px;
                .detail-bottom-left {
                    display: flex;
                    .img {
                        display: flex;
                        align-items: center;
                        margin-right: 36px;
                        img {
                            width: 36px;
                        }
                    }
                    .more {
                        width: 300px;
                        display: flex;
                        justify-content: space-between;
                        line-height: 29px;
                        a {
                            color: #6c7073;
                        }
                    }
                }
                .detail-bottom-right {
                    .cooperate {
                        a {
                            margin-left: 36px;
                            img {
                                height: 24px;
                            }
                        }
                    }
                }
            }
            hr {
                margin: 0 0 16px 0;
            }
        }
        .BottomNav-bottom {
            font-size: 12px;
            background-color: white;
            padding: 16px 0 72px 0;
            border-bottom: 2px;
            .container {
                display: flex;
                justify-content: space-between;
                .BottomNav-bottom-left {
                    display: flex;
                    .copyright {
                        margin-right: 36px;
                    }
                    .more {
                        display: flex;
                        justify-content: space-between;
                        a {
                            font-size: 12px;
                            color: #6c7073;
                            // margin-right: 18px;
                        }
                        span {
                            width: 2px;
                            height: 2px;
                            display: inline-block;
                            background-color: #6c7073;
                            border-radius: 50%;
                            margin: auto 7px;
                        }
                    }
                }
                .BottomNav-bottom-right {
                    a {
                        font-size: 12px;
                        color: #6c7073;
                    }
                }
            }
            
        }
        
       
    }
</style>